// 管理页面通用样式
.management-page {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);

  .filter-card {
    margin-bottom: 20px;
    border-radius: 8px;

    :deep(.el-card__body) {
      padding: 15px 20px;
    }
  }

  .list-card {
    border-radius: 8px;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-left {
        display: flex;
        align-items: center;
        gap: 12px;

        .header-title {
          font-size: 16px;
          font-weight: 600;
          color: #303133;
        }

        .header-count {
          margin-left: 8px;
        }
      }
    }
  }

  .search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 0;

    .search-buttons {
      margin-left: auto;
      margin-right: 0;
    }

    :deep(.el-form-item) {
      margin-bottom: 0;
      margin-right: 0;
    }
  }

  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }

  :deep(.el-table) {
    border-radius: 8px;
    overflow: hidden;

    .el-table__header {
      th {
        background-color: #f5f7fa;
        color: #606266;
        font-weight: 600;
      }
    }

    .el-table__row {
      transition: background-color 0.3s;

      &:hover {
        background-color: #f5f7fa;
      }
    }
  }

  :deep(.el-dialog) {
    border-radius: 8px;
    overflow: hidden;

    .el-dialog__header {
      margin: 0;
      padding: 20px;
      border-bottom: 1px solid #dcdfe6;
      background-color: #f5f7fa;

      .el-dialog__title {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
      }
    }

    .el-dialog__body {
      padding: 20px;
    }

    .el-dialog__footer {
      padding: 20px;
      border-top: 1px solid #dcdfe6;
      background-color: #f5f7fa;
    }
  }

  .upload-container {
    :deep(.el-upload-list) {
      max-height: 150px;
      overflow-y: auto;
    }

    :deep(.el-upload-dragger) {
      width: 100%;
      height: 180px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;

      .el-icon--upload {
        font-size: 48px;
        color: #409eff;
        margin-bottom: 0;
      }

      .el-upload__text {
        font-size: 14px;
        color: #606266;

        em {
          color: #409eff;
          font-style: normal;
        }
      }
    }

    :deep(.el-upload--picture-card) {
      --el-upload-picture-card-size: 120px;
      border-radius: 8px;
      transition: all 0.3s;

      &:hover {
        border-color: #409eff;
        color: #409eff;
      }
    }

    :deep(.el-upload-list__item) {
      border-radius: 8px;
    }
  }

  .el-upload__tip {
    color: #909399;
    font-size: 12px;
    margin-top: 8px;
  }
} 